<template>
    <div style="display: inline-block" @click.stop>
        <el-popover :ref="(el:refItem) => handleSetFromMap(el, item)" placement="bottom" title="" width="300" trigger="click">
            <!-- 单个文本框 -->
            <div v-if="filterType == 'text'">
                <el-input v-model.trim="conditions.text" size="mini" clearable 
                :placeholder="placeholder ? (placeholder=='部门' ? '直属部门': placeholder): '请输入查询内容'"
                @input="onInput('', $event)" :maxlength="(placeholder=='联系方式') ? 11 : 200"
                @keyup.enter="confirm()" />
            </div>
            <!-- 数值范围 -->
            <div v-else-if="filterType == 'number'">
                <el-input v-model.trim="conditions.number1"  size="mini" clearable type="number" step="0.01" placeholder="请输入开始数值" />
                <el-input v-model.trim="conditions.number2"  size="mini" clearable step="0.01" style="margin-top: 10px" placeholder="请输入结束数值" />
            </div>
            <!-- 日期-->
            <div v-else-if="filterType == 'date'">
                <el-date-picker v-model="conditions.date1" type="date" clearable size="mini"  placeholder="开始时间" value-format="yyyy-MM-dd" />
                <el-date-picker v-model="conditions.date2" style="margin-top: 10px" type="date" size="mini" clearable  placeholder="结束时间" value-format="yyyy-MM-dd" />
            </div>
            <!-- 下拉框-->
            <div v-else-if="filterType == 'select'">
                <el-select v-model="conditions.select" placeholder="请选择"  size="mini" clearable >
                    <el-option v-for="(item, index) in customArrList" :key="index" :label="item.label" :value="item.value"/>
                </el-select>
            </div>
            <!-- 复选框-->
            <div v-else-if="filterType == 'checkbox'">
                <el-checkbox-group v-model="conditions.checkbox">
                    <el-checkbox v-for="(item, index) in customArrList" :key="index" :label="item.value">{{ item.label }}</el-checkbox>
                </el-checkbox-group>
            </div>
            <!--单选按钮-->
            <div v-else-if="filterType == 'radio'">
                <el-radio-group v-model="conditions.radio">
                    <el-radio v-for="(item, index) in customArrList" :key="index" :label="item.value" border size="mini">{{ item.label }}</el-radio>
                </el-radio-group>
            </div>
            <!-- confirm 确定框-->
            <div class="text-right mgt10">
                <el-button type="text" size="mini" @click="confirm" >筛选</el-button>
                <el-button type="text" size="mini" @click="reset" >重置</el-button>
            </div>
            <!-- 标题-->
            <template #reference>
                <span onselectstart="return false" oncontextmenu="return false" style="cursor:pointer;" :class="labelColor">
                    {{ column.label }} &nbsp;<i class="el-icon-arrow-down" /></span>
            </template>
        </el-popover>
    </div>
</template>
<script lang="ts" name="filterHeader" setup>
import { useAppStore } from "@/store";
import { onMounted, ref, watch } from "vue";

    const store = useAppStore();
    const props = defineProps({
        column: Object,
        fieldName: String,
        filterType: String,
        customArrList: Array,
        placeholder: String,
        searchForm: Object,
    });
    let activePopover = ref(-1);
    let conditions = ref({
        text: '',
        number1: '',
        number2: '',
        date1: '',
        date2: '',
        select: '',
        checkbox: [],
        radio: ''
    });
    const fromRefMap = ref({});

    /** 动态设置From Ref */
    const handleSetFromMap = (el: refItem, item: any) => {
        if (el) {
            fromRefMap.value[`popover${props.fieldName}`] = el;
        }
    };
    
    const emit = defineEmits(['tableFilter', 'resetFilter']);
    let labelColor = onMounted(() => {
        switch (props.filterType) {
            case 'text':
                if (conditions.value.text) { return 'heighLight' }
                return ''
            case 'number':
                if (conditions.value.number1 || conditions.value.number2) { return 'heighLight' }
                return ''
            case 'date':
                if (conditions.value.date1 || conditions.value.date2) { return 'heighLight' }
                return ''
            case 'select':
                if (conditions.value.select) { return 'heighLight' }
                return ''
            case 'checkbox':
                if (conditions.value.checkbox.length > 0) { return 'heighLight' }
                return ''
            case 'radio':
                if (conditions.value.radio !== '') { return 'heighLight' }
                return ''
        }
        return ''
    })
    watch(props.searchForm, (newVal, oldVal) => {
        if(JSON.stringify(newVal) == '{}' || (JSON.stringify(newVal) == '{"status":[],"checkAllStatus":false}' ||
            (JSON.stringify(newVal) == '{"status":[]}'))){
            clearAll();
        }
    });
    let onInput = (key: any, event: any)=>{
        if(props.placeholder=='联系方式'){
            conditions.value.text = event.replace(/[^\d]/g,'')
        }
    };
     /**
     * 触发筛选
     */
    let confirm=()=>{
        if(fromRefMap.value['popover'+props.fieldName]){
            fromRefMap.value['popover'+props.fieldName].doClose()
        }
        emit('tableFilter', {
            filterType: props.filterType,
            fieldName: props.fieldName,
            conditions: conditions.value,
            label: props.column.label
        })
    };
    /**
     * 触发重置
     */
    let reset=(key)=> {
        switch (props.filterType) {
            case 'text':
                conditions.value.text = ''
                break
            case 'number':
                conditions.value.number1 = ''
                conditions.value.number2 = ''
                break
            case 'date':
                conditions.value.date1 = ''
                conditions.value.date2 = ''
                break
            case 'select':
                conditions.value.select = ''
                break
            case 'checkbox':
                conditions.value.checkbox = []
                break
            case 'radio':
                conditions.value.radio = ''
                break
        }
        if(fromRefMap.value['popover'+ props.fieldName]){
            fromRefMap.value['popover'+ props.fieldName].doClose();
        }
        emit('resetFilter', {
            filterType: props.filterType,
            fieldName: props.fieldName,
            conditions: conditions.value,
            label: props.column.label
        })
    };
    /**
     * 表格 清空全部筛选项
     */
    let clearAll=()=>{
        switch (props.filterType) {
            case 'text':
                conditions.value.text = ''
                break
            case 'number':
                conditions.value.number1 = ''
                conditions.value.number2 = ''
                break
            case 'date':
                conditions.value.date1 = ''
                conditions.value.date2 = ''
                break
            case 'select':
                conditions.value.select = ''
                break
            case 'checkbox':
                conditions.value.checkbox = []
                break
            case 'radio':
                conditions.value.radio = ''
                break
        }
        if(fromRefMap.value['popover'+ props.fieldName]){
            fromRefMap.value['popover'+ props.fieldName].doClose();
        }
    }
</script>